<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件类型</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(231, 161, 161);
            margin: 100px auto;
        }
        body{
            height: 5000px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <form action="">
        <input type="text" id="username">
        <input type="text" id="name">
        
    </form>
    <button>按钮</button>
    <script>
        const box = document.querySelector('.box')
        const username = document.getElementById('username')
        const name = document.getElementById('name')
        const button = document.querySelector('button')
        box.addEventListener('mousedown',function(){
            console.log('mouseDonw')
        })
        box.addEventListener('mouseup',function(){
            console.log('mouseup')
        })
        // box.addEventListener('mousemove',function(e){
        //     console.log('mousemove')
        //     console.log(`x:${e.x},y:${e.y}`)
        // })
        box.addEventListener('mouseover',function(){
            console.log('mouseover')
        })

        box.addEventListener('mouseout',function(){
            console.log('mouseout')
        })

        username.onfocus = function(e){
            console.log('input focus')
        }
        username.onblur = function(e){
            console.log('input blur')
        }
        button.onfocus = function(e){
            console.log('button focus')
        }

        window.onoffline = function(e){
            console.log(e)
            console.log('断网了')
        }
        username.oninput = function(){
            console.log(username.value)
        }
        name.onchange = function(){
            console.log(name.value)
        }

        window.onkeydown = function(e){
            console.log(e.key)
            console.log(e)
            
        }
        window.onresize = function(){
            console.log('resize')
        }
    </script>
</body>
</html>